<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="aside" width="auto">
        <left-sidebar/>
      </el-aside>
      <el-container>
        <el-header class="header">
          <HeaderTop/>
        </el-header>
<!--        <el-input-tag-->
<!--          v-model="input"-->
<!--          :tag-type="tagType"-->
<!--          :tag-effect="tagEffect"-->
<!--          placeholder="Please input"-->
<!--        >-->
<!--          <template #tag="{ value }">-->
<!--            <div class="flex items-center">-->
<!--              <el-icon class="mr-1">-->
<!--                <ElementPlus />-->
<!--              </el-icon>-->
<!--              <span>{{ value }}</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-input-tag>-->
          <el-container class="main-container">
            <el-main class="main">
              <RouterView/>
            </el-main>
          </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import LeftSidebar from "@/components/admin/LeftSidebar.vue";
import HeaderTop from "@/views/admin/layout/HeaderTop.vue";
import type { TagProps } from 'element-plus'
import {ref} from "vue";

const type: Array<TagProps['type']> = [
  'primary',
  'success',
  'info',
  'warning',
  'danger',
]
const effect: Array<TagProps['effect']> = ['light', 'dark', 'plain']

const tagType = ref<TagProps['type']>('primary')
const tagEffect = ref<TagProps['effect']>('plain')
const input = ref<string[]>(['tag1', 'tag2', 'tag3'])
</script>
<style scoped>
.header{
  background-color: var(--el-component-bg);
  height: 50px;
  width: 100%;
  border-bottom: solid 1px var(--el-border-color-light);
}
.main{
  background-color: var(--el-component-bg);
  border-radius: 5px;
  height: calc(100vh - 90px);
  box-shadow: 2px 3px 15px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}
.main-container{
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.common-layout{
  overflow: hidden;
}
.aside{
  background-color: #545C64 !important;
  transition: background-color 0.3s ease;
}
:root.dark .aside {
  background-color: var(--el-menu-bg-color) !important;
}
</style>
